<template>
  <div @dragstart="dragStart" :id="'widget-item-'+uuid.v4()" draggable="true" class="widget-item" >
    <n-icon>
      <svg-icon class="my-icon" :icon="options.icon"/>
    </n-icon>
    <span style="margin-left:10px;">{{options.title}}</span>
  </div>
</template>

<script>
import {uuid} from 'vue-uuid'
import SvgIcon from '../../../components/SvgIcon.vue'
export default {
  components: { SvgIcon },
  props:["options"],
  setup(props) {
    const dragStart = e => {
      e.dataTransfer.setData("Json",JSON.stringify(props.options));
    }
    return {
      uuid,dragStart
    }
  },
}
</script>
<style lang="less" scoped>
.widget-item {
  border: 1px solid rgba(0,0,0,0);
  border-radius: 3px;
  padding:0 10px;
  text-overflow: ellipsis;
  display: block;
  background-color: rgba(126, 126, 126, 0.2);
}
.widget-item:hover {
    border: 1px dashed #63e2b7;
    cursor: move;
  }
</style>